import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import * as THREE from 'three';

interface TechWallProps {
  width: number;
  height: number;
  depth: number;
  position: [number, number, number];
  rotation: [number, number, number];
  color?: string;
  lineColor?: string;
  glowColor?: string;
  lineDensity?: number;
}

const TechWall: React.FC<TechWallProps> = ({
  width,
  height,
  depth,
  position,
  rotation,
  color = '#446E92', // 深色基底，参考地板
  lineColor = '#00f0ff', // 亮蓝色线条，参考地板
  glowColor = '#614488', // 亮蓝色发光效果，参考地板
  lineDensity = 25 // 提高密度，参考地板
}) => {
  const meshRef = useRef<THREE.Mesh>(null);
  const timeRef = useRef(0);

  // 自定义着色器材质配置
  const shaderConfig = {
    vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `,
    // 片段着色器部分
      fragmentShader: `
        uniform float time;
        uniform vec3 color;
        uniform vec3 lineColor;
        uniform vec3 glowColor;
        varying vec2 vUv;
        
        // 噪声函数
        float noise(vec2 p) {
          return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
        }
        
        // 平滑噪声
        float smoothNoise(vec2 p) {
          vec2 i = floor(p);
          vec2 f = fract(p);
          
          float a = noise(i);
          float b = noise(i + vec2(1.0, 0.0));
          float c = noise(i + vec2(0.0, 1.0));
          float d = noise(i + vec2(1.0, 1.0));
          
          vec2 u = f * f * (3.0 - 2.0 * f);
          
          return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
        }
        
        void main() {
          // 基础颜色 - 提高透明度
          vec4 baseColor = vec4(color, 0.3);
          
          // 直接使用基础颜色
          vec4 mixed = baseColor;
          
          // 优化动态发光效果，降低强度避免闪烁
          float glowFactor = 0.1 + 0.05 * sin(time * 0.2 + vUv.x * 4.0 + vUv.y * 4.0);
          vec4 glow = vec4(glowColor, glowFactor);
          mixed.rgb += glow.rgb * glow.a;
          
          // // 添加细微的纹理变化，降低强度
          // float textureNoise = smoothNoise(vUv * 40.0 + time * 0.01) * 0.04;
          // mixed.rgb += textureNoise;
          
          // 添加区域发光效果，降低强度
          float areaGlow = 0.08 * (sin(vUv.x * 4.0) * sin(vUv.y * 4.0)) * exp(-pow(vUv.x - 0.5, 2.0) * 2.0 - pow(vUv.y - 0.5, 2.0) * 2.0);
          mixed.rgb += vec3(areaGlow * glowColor);
          
          // 优化边缘发光效果
          float edgeGlow = 0.03 * smoothstep(0.02, 0.0, min(vUv.x, min(vUv.y, min(1.0 - vUv.x, 1.0 - vUv.y))));
          mixed.rgb += vec3(edgeGlow * glowColor);
          
          // 添加墙体顶部发光效果，增强强度和范围，使用#00f0ff颜色
          float topGlow = 0.3 * smoothstep(0.9, 1.0, vUv.y); // 增强强度并扩大范围
          vec3 topGlowColor = vec3(0.0, 1.0, 1.0); // 明确使用#00f0ff颜色
          mixed.rgb += topGlow * topGlowColor;
          
          // 添加顶部区域的额外发光效果，使其更加明亮
          float enhancedTopGlow = 0.2 * pow(smoothstep(0.95, 1.0, vUv.y), 2.0);
          mixed.rgb += enhancedTopGlow * topGlowColor;
          
          // 确保整体亮度足够，解决不同角度阴影问题
          mixed.rgb = clamp(mixed.rgb, vec3(0.0), vec3(1.0));
          
          // 调整alpha值以提高透明度
          mixed.a = max(mixed.a, 0.5);
          
          gl_FragColor = mixed;
        }
      `,
    uniforms: {
      time: { value: 0 },
      color: { value: new THREE.Color(color) },
      lineColor: { value: new THREE.Color(lineColor) },
      glowColor: { value: new THREE.Color(glowColor) }
    },
    side: THREE.DoubleSide,
      transparent: true,
      depthWrite: false // 关闭深度写入以减少透明物体闪烁
  };

  // 使用useFrame更新时间
  useFrame(() => {
    if (meshRef.current && meshRef.current.material) {
      const material = meshRef.current.material as THREE.ShaderMaterial;
      if ('uniforms' in material && material.uniforms.time) {
        timeRef.current += 0.016;
        material.uniforms.time.value = timeRef.current;
      }
    }
  });

  return (
    <mesh ref={meshRef} position={position} rotation={rotation}>
      <boxGeometry args={[width, height, depth]} />
      <shaderMaterial
        vertexShader={shaderConfig.vertexShader}
        fragmentShader={shaderConfig.fragmentShader}
        uniforms={shaderConfig.uniforms}
        side={shaderConfig.side}
        transparent={shaderConfig.transparent}
      />
    </mesh>
  );
};

export default TechWall;